@layout("/common/_container.html"){
<style>
    input{
        border: 1px solid #a9a9a9;
    }
    input,select{
        border-radius: 3px;
    }
    .ul_li>li,.records>li{
        float: left;
        margin-right: 3%;
    }
    .ul_li label{
        padding-right: 9px;
    }
    .records{
        margin: 0;
    }
    .records>li{
        color: white;
        cursor:pointer;
    }
    .records>li>span{
        font-weight: bold;
    }
    .record_box ul{
        padding: 0;
    }
    .btn_box button{
        margin: 0;
        color: white;
        background: #2eadd0;
        padding: 6px 30px;
        font-size: 1em;
    }
    .choice_btn{
        background: #5e8aa3;
        color: white;
        padding: 3px 10px;
        font-size: 1em;
    }
    .bigSize{
        font-size: 1.2em;
    }
    .selectBox{
        width:205px;
        height: 39px
    }
    .ul_li ul>li{
        margin-bottom: 15px;
    }

    .divFlex{display: flex;flex-direction: column;border: 1px solid #cccccc;background: #f5f5f5;text-align: center}
    .flex_one,.flex_two{flex: 1;display: flex}
    .flex_one>div,.flex_two>div{flex: 1;border-right: 1px solid #cccccc;padding: 8px;}
    .flex_one>div:last-of-type,.flex_two>div:last-of-type{border: none;}
    .flex_one{border-bottom: 1px solid #cccccc;font-weight: bold;}
    .flex_two input,.flex_two select{width: 80%;height: 34px;padding-left: 5px;}


</style>
<div class="ibox float-e-margins ">
    <div class="ibox-content record_box">
        <div style="display: none">
            <input type="hidden" id="id" value="">
            <input type="hidden" id="pageType" value="2">
            <input type="hidden" id="userName" value="${userName}">
            <input type="hidden" id="oneChannelValue" value="">
            <input type="hidden" id="twoChannelValue" value="">
            <input type="hidden" id="thrChannelValue" value="">
        </div>
        <div class="row bigSize">
            <div class="col-sm-12">
                <div class="divFlex">
                    <div class="flex_one">
                        <div>门诊</div>
                        <div>部门</div>
                        <div>访问病种</div>
                        <div>预约项目</div>
                        <div>回访状态</div>
                        <div>一级渠道</div>
                        <div>二级渠道</div>
                        <div>三级渠道</div>
                        <div>建档人</div>
                        <div>跟进人</div>
                    </div>
                    <div class="flex_two">
                        <div>
                            <select id="outpatientName" name="outpatientName" class="selectBox" onchange="ReservationsRecordTable.getData()">
                            </select>
                        </div>
                        <div>
                            <select id="department" name="department" class="selectBox" onchange="ReservationsRecordTable.getData()" >
                                <option value="">全部</option>
                                <option value="网电咨询">网电咨询</option>
                                <option value="电销咨询">电销咨询</option>
                                <option value="公共池">公共池</option>
                                <option value="地推">地推</option>
                                <option value="新媒体">新媒体</option>
                                <option value="老带新">老带新</option>
                                <option value="直接上门">直接上门</option>
                            </select>
                        </div>
                        <div>
                            <select  id="accessDisease" name="accessDisease" class="selectBox" onchange="ReservationsRecordTable.getData()">
                                <option value="">全部</option>
                                <option value="种植">种植</option>
                                <option value="正畸">正畸</option>
                                <option value="修复">修复</option>
                                <option value="美白">美白</option>
                                <option value="拔牙智齿">拔牙智齿</option>
                                <option value="牙周">牙周</option>
                                <option value="洗牙洁牙">洗牙洁牙</option>
                                <option value="医院类">医院类</option>
                                <option value="儿童齿科">儿童齿科</option>
                            </select>
                        </div>
                        <div>
                            <select id="appointmentPayService" name="appointmentPayService" class="selectBox" onchange="ReservationsRecordTable.getData()">
                            </select>
                        </div>
                        <div>
                            <select id="statuss" name="statuss" class="selectBox" style="float: right" onchange="ReservationsRecordTable.getData()">
                                <option value="">全部</option>
                                <option value="预约">预约</option>
                                <option value="待定">待定</option>
                                <option value="跟进">跟进</option>
                                <option value="过期">过期</option>
                            </select>
                        </div>
                        <div>
                            <select id="oneChannel"  name="oneChannel" class="selectBox" onchange="ReservationsRecordTable.getData()">
                            </select>
                        </div>
                        <div>
                            <select id="twoChannel" name="twoChannel" class="selectBox" onchange="ReservationsRecordTable.getData()">
                            </select>
                        </div>
                        <div>
                            <select id="thrChannel" name="thrChannel" class="selectBox" onchange="ReservationsRecordTable.getData()">
                            </select>
                        </div>
                        <div>
                            <input type="text" id="follower" style="width: 60%">
                            <a style="color: #2eadd0;" href="javascript:;" onclick="ReservationsRecordTable.getFollower()">选择</a>
                        </div>
                        <div>
                            <input type="text" id="archiving" style="width: 60%">
                            <a style="color: #2eadd0;" href="javascript:;" onclick="ReservationsRecordTable.getArchiving()">选择</a>
                        </div>
                    </div>
                </div>

                <!--<ul class="ul_li clearfix">-->
                    <!--<li>-->
                        <!--<ul>-->
                            <!--<li>-->
                                <!--<label>门诊</label>-->
                                <!--<select id="outpatientName" name="outpatientName" class="selectBox" onchange="ReservationsRecordTable.getData()">-->
                                <!--</select>-->
                            <!--</li>-->
                            <!--<li>-->
                                <!--<label>部门</label>-->
                                <!--<select id="department" name="department" class="selectBox" onchange="ReservationsRecordTable.getData()" >-->
                                    <!--<option value="">全部</option>-->
                                    <!--<option value="网电咨询">网电咨询</option>-->
                                    <!--<option value="电销咨询">电销咨询</option>-->
                                    <!--<option value="公共池">公共池</option>-->
                                    <!--<option value="地推">地推</option>-->
                                    <!--<option value="新媒体">新媒体</option>-->
                                    <!--<option value="老带新">老带新</option>-->
                                    <!--<option value="直接上门">直接上门</option>-->
                                <!--</select>-->
                            <!--</li>-->
                        <!--</ul>-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--<ul>-->
                            <!--<li>-->
                                <!--<label>访问病种</label>-->
                                <!--<select  id="accessDisease" name="accessDisease" class="selectBox" onchange="ReservationsRecordTable.getData()">-->
                                    <!--<option value="">全部</option>-->
                                    <!--<option value="种植">种植</option>-->
                                    <!--<option value="正畸">正畸</option>-->
                                    <!--<option value="修复">修复</option>-->
                                    <!--<option value="美白">美白</option>-->
                                    <!--<option value="拔牙智齿">拔牙智齿</option>-->
                                    <!--<option value="牙周">牙周</option>-->
                                    <!--<option value="洗牙洁牙">洗牙洁牙</option>-->
                                    <!--<option value="医院类">医院类</option>-->
                                    <!--<option value="儿童齿科">儿童齿科</option>-->
                                <!--</select>-->
                            <!--</li>-->
                            <!--<li>-->
                                <!--<label>预约项目</label>-->
                                <!--<select id="appointmentPayService" name="appointmentPayService" class="selectBox" onchange="ReservationsRecordTable.getData()">-->
                                <!--</select>-->
                            <!--</li>-->
                        <!--</ul>-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--<ul>-->
                            <!--<li class="clearfix">-->
                                <!--<label style="margin-top: 3%;">回访状态</label>-->
                                <!--<select id="statuss" name="statuss" class="selectBox" style="float: right" onchange="ReservationsRecordTable.getData()">-->
                                    <!--<option value="">全部</option>-->
                                    <!--<option value="预约">预约</option>-->
                                    <!--<option value="待定">待定</option>-->
                                    <!--<option value="跟进">跟进</option>-->
                                    <!--<option value="过期">过期</option>-->
                                <!--</select>-->
                            <!--</li>-->
                            <!--<li>-->
                                <!--<label>一级渠道</label>-->
                                <!--<select id="oneChannel"  name="oneChannel" class="selectBox" onchange="ReservationsRecordTable.getData()">-->
                                <!--</select>-->
                            <!--</li>-->
                        <!--</ul>-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--<ul>-->
                            <!--<li>-->
                                <!--<label style="text-indent: 1em">建档人</label>-->
                                <!--<input type="text" id="archiving"  style="width: 128px;height: 39px;margin-right: 2px;"><button-->
                                    <!--type="button" class="btn choice_btn" onclick="ReservationsRecordTable.getArchiving()" style="height: 39px;margin: 0;">请选择</button>-->
                            <!--</li>-->
                            <!--<li>-->
                                <!--<label>二级渠道</label>-->
                                <!--<select id="twoChannel" name="twoChannel" class="selectBox" onchange="ReservationsRecordTable.getData()">-->
                                <!--</select>-->
                            <!--</li>-->
                        <!--</ul>-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--<ul>-->
                            <!--<li>-->
                                <!--<label style="text-indent: 1em">跟进人</label>-->
                                <!--<input type="text" id="follower"  style="width: 128px;height: 39px;margin-right: 2px;"><button-->
                                    <!--type="button" class="btn choice_btn" onclick="ReservationsRecordTable.getFollower()" style="height: 39px;margin: 0;">请选择</button>-->
                            <!--</li>-->
                            <!--<li>-->
                                <!--<label>三级渠道</label>-->
                                <!--<select id="thrChannel" name="thrChannel" class="selectBox" onchange="ReservationsRecordTable.getData()">-->
                                <!--</select>-->
                            <!--</li>-->
                        <!--</ul>-->
                    <!--</li>-->
                <!--</ul>-->
            </div>
        </div>
        <div class="row bigSize" style="padding:15px 0;">
            <div class="col-sm-12">
                <div style="display: flex">
                    <div style="flex: 2;">
                        <label>预约时间</label>
                        <input type="text" id="startAppointmentTime" style="width: 186px;height: 39px;padding-left: 5px;" onclick="laydate({istiem:true,format:'YYYY-MM-DD hh:mm:ss'})">
                        <span>-</span>
                        <input type="text" id="endAppointmentTime"  style="width: 186px;height: 39px;padding-left: 5px;" onclick="laydate({istiem:true,format:'YYYY-MM-DD hh:mm:ss'})">
                    </div>
                    <div style="flex: 2;">
                        <label>建档时间</label>
                        <input type="text" id="startFilingTime" value="" style="width: 186px;height: 39px;padding-left: 5px;" onclick="laydate({istiem:true,format:'YYYY-MM-DD hh:mm:ss'})">
                        <span>-</span>
                        <input type="text" id="endFilingTime" value=""   style="width: 186px;height: 39px;padding-left: 5px;" onclick="laydate({istiem:true,format:'YYYY-MM-DD hh:mm:ss'})">
                    </div>
                    <div style="flex: 1;">
                        <div style="width: 320px;height: 39px;border: 1px solid #cccccc;border-radius: 3px">
                            <span class="glyphicon glyphicon-search" style="padding: 7px 0px 0px 10px;"></span>
                            <input type="text" id="reach" placeholder="姓名/电话/微信/预约号" style="width: 270px;height: 35px;border: none;float: right;outline:none;margin-top: 1px" onchange="ReservationsRecordTable.search()" >
                        </div>
                    </div>
                    <div style="flex: 1;text-align: right;">
                        <div class="btn_box">
                            <button type="button" class="btn" onclick="ReservationsRecordTable.resetSearch()">重置</button>
                            <button type="button" class="btn" onclick="ReservationsRecordTable.reservationsExport()">导出</button>
                        </div>
                    </div>
                </div>
            </div>

            <!--<ul class="ul_li clearfix">-->
                <!--<li>-->
                    <!--<label>预约时间</label>-->
                    <!--<input type="text" id="startAppointmentTime" style="width: 186px;height: 39px;padding-left: 5px;" onclick="laydate({istiem:true,format:'YYYY-MM-DD hh:mm:ss'})">-->
                    <!--<span>-</span>-->
                    <!--<input type="text" id="endAppointmentTime"  style="width: 186px;height: 39px;padding-left: 5px;" onclick="laydate({istiem:true,format:'YYYY-MM-DD hh:mm:ss'})">-->
                <!--</li>-->
                <!--<li>-->
                    <!--<label>建档时间</label>-->
                    <!--<input type="text" id="startFilingTime" value="" style="width: 186px;height: 39px;padding-left: 5px;" onclick="laydate({istiem:true,format:'YYYY-MM-DD hh:mm:ss'})">-->
                    <!--<span>-</span>-->
                    <!--<input type="text" id="endFilingTime" value=""   style="width: 186px;height: 39px;padding-left: 5px;" onclick="laydate({istiem:true,format:'YYYY-MM-DD hh:mm:ss'})">-->
                <!--</li>-->
                <!--<li>-->
                    <!--<div style="width: 288px;height: 39px;border: 1px solid #cccccc;border-radius: 3px">-->
                        <!--<span class="glyphicon glyphicon-search" style="padding: 7px 0px 0px 10px;"></span>-->
                        <!--<input type="text" id="reach" placeholder="姓名/电话/微信/预约号" style="width: 238px;height: 35px;border: none;float: right;outline:none;margin-top: 1px" onchange="ReservationsRecordTable.search()" >-->
                    <!--</div>-->
                <!--</li>-->
                <!--<li class="btn_box" style="float: left">-->
                    <!--<div>-->
                        <!--<button type="button" class="btn" onclick="ReservationsRecordTable.resetSearch()">重置</button>-->
                        <!--<button type="button" class="btn" onclick="ReservationsRecordTable.reservationsExport()">导出</button>-->
                    <!--</div>-->
                <!--</li>-->
            <!--</ul>-->

        </div>
        <div class="row bigSize">
            <div class="col-sm-12" style="background:#3b97d3;;line-height: 46px;">
                <ul class="records clearfix">
                    <li>未到</li>
                    <li onclick="ReservationsRecordTable.today()">今日: <span style="color: #59efe6" id="weidaoToday">0</span></li>
                    <li onclick="ReservationsRecordTable.yesteray()">昨日: <span style="color: #c61839" id="weidaoYesterday">0</span></li>
                    <li onclick="ReservationsRecordTable.thisMonth()">本月: <span style="color: #ecee11" id="weidaoMonth">0</span></li>
                    <li onclick="ReservationsRecordTable.lastMonth()">同比: <span style="color: #bc24c7" id="weidaoLastMonth">0</span></li>
                </ul>
            </div>
        </div>
        <#table id="ReservationsRecordTable"/>
    </div>
</div>

<script src="${ctxPath}/static/modular/marketing/reservations/reservations_notRecord.js"></script>
<script src="${ctxPath}/static/js/common/jsChannel.js"></script>
<script>
    var oneChanneli = document.getElementById("oneChannelValue").value;
    var twoChanneli = document.getElementById("twoChannelValue").value;
    var thrChanneli = document.getElementById("thrChannelValue").value;
    $.post(Feng.ctxPath + "/channel/getChannelss", function (data) {
        ChannelList = data;
        channelInit('oneChannel', 'twoChannel', 'thrChannel');
    }, "json");

</script>
@}